<template>
    <div class="page-container">
        <div class="page-content">
           <blockquote class="breadcrumb">
                <a href="/" title="网站首页">网站首页<span class="separator">&gt;</span></a>
                <a href="{{navCardData.firstBreadcrumbUrl}}" v-if="navCardData.activeBreadcrumbIndex === 0" title="{{navCardData.firstBreadcrumb}}">{{navCardData.firstBreadcrumb}}<span class="separator">&gt;</span></a>
                <span class="active">{{ navCardData.currentBreadcrumb}}</span>
            </blockquote>
        <div class="content-left">
           <ArchiveList />
        </div>
        <div class="content-right">
            <TagList />
          <RandomArticleList />
          <CategoryArticleCard />
          <FriendLinkCard />
    </div>
    </div>
    </div>
</template>

<script setup>
    import TagList from "@/components/articles/card/TagList.vue";
    import ArchiveList from "@/components/articles/archive/ArchiveList.vue";
    import CategoryArticleCard from '@/components/articles/card/CategoryArticleCard.vue'
        import FriendLinkCard from '@/components/com/FriendLinkCard.vue'
        import RandomArticleList from '@/components/articles/card/RandomArticleList.vue'
        const navCardData = {
            firstBreadcrumb: '文章归档',
            firstBreadcrumbUrl: '/archive',
          activeBreadcrumbIndex: 1,
          currentBreadcrumb: '文章归档'
        }

</script>

<style scoped>
.content-right {
  margin-top: 0;
}
/*资源分享欲关于本站的顶部菜单样式 */
.breadcrumb {
    background-color: var(--card-bg-color,#fff);
    padding: 10px 0;
    font-size: 14px;

    color: var(--card-text-color,#666);
    border-left: 4px solid var(--card-border-color,#5FB878);
  width: 100%;
  margin:50px auto 20px auto;

}

.breadcrumb a {
  color: var(--card-text-color,#333);
  text-decoration: none;
  margin-left: 10px;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb .separator {
  margin: 0 5px;
  color: var(--card-text-color,#aaa);
}
@media (max-width: 992px) {
 .breadcrumb {
    width: 92%;
  }
}
@media (max-width: 768px) {
 .breadcrumb {
    width: 90%;
  }
}
@media (max-width: 576px) {
  .breadcrumb {
    margin: 40px auto 15px auto;
  }
}
</style>